import { defineComponent, ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import './index.scss';

export default defineComponent({
  name: 'form-precut',
  setup(props, { emit }) {
    const perfix = 'formPrecut';

    const list = ref([]);

    const addList = (val) => {
      console.log(val);
    };

    const Draggable = () => {
      return (
        <VueDraggable class='form-design' v-model={list.value} handle='[cursor-move]' animation={200} item-key='key' group='form-design' onAdd={addList}>
          {props.list.map((item) => (
            <div class='item' key={item.type}>
              {item.label}
            </div>
          ))}
        </VueDraggable>
      );
    };

    return () => (
      <div class={perfix}>
        {list.value.length === 0 ? (
          <div class='empty'>请先添加表单组件</div>
        ) : (
          <div>
            <Draggable />
          </div>
        )}
      </div>
    );
  },
});
